<!-- Learn Modal START -->
<auth-operation (updateStatus)="updateStatus($event);"></auth-operation>
<div class="modal fade modal-info" id="learnModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
				<h4 class="modal-title" id="myModalLabel">New to Mirage?</h4> </div>
			<div class="modal-body">
	            <div class="learn-description">
					<p>
						Check out this video and the links below for a quick start with Mirage.
					</p>
					<div class="learn-list-contianer">
						<ul class="learn-list">
							<li>
							    <iframe src="https://player.vimeo.com/video/185000306?title=0&byline=0&portrait=0" width="100%" height="300px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
							</li>
							<li>
								<a (click)="loadLearn();">Live demo with preloaded queries</a>
							</li>
							<li class="introBottom">
								<a class="pull-left" href="https://github.com/appbaseio/mirage/blob/dev/README.md" target="_blank">Read more on Github</a>
								<button  *ngIf="!profile" class="btn btn-primary pull-right" (click)="subscribe();">
									<i class="fa fa-github"></i> Subscribe with Github
								</button>
								<button  *ngIf="profile" disabled="" class="btn btn-primary pull-right">
									<i class="fa fa-check"></i> Subscribed
								</button>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Learn Modal END -->
<!-- Info Modal START -->
<div class="modal fade modal-info" id="learnInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
				<h4 class="modal-title" id="myModalLabel">Preloading Queries</h4> </div>
			<div class="modal-body">
				<p class="learn-description">
					We have loaded some new queries for you to try out Mirage, you can find them in the left "saved queries" sidebar.
				</p>
			</div>
		</div>
	</div>
</div>
<!-- Info Modal END -->
